<template>
  <md-nav-bar title="制作mv" backgroundColor="#eaf8f4" />
  <view class="container">
    <view class="form">
      <uni-forms ref="form" :modelValue="data.formData" label-position="top" :rules="data.rules" label-width="100">
        <view class="form-row">
          <view class="form-col">
            <uni-forms-item label="歌名" name="musicName" required>
              <uni-easyinput type="text" v-model="data.formData.musicName" placeholder="请输入歌名" />
            </uni-forms-item>
          </view>
          <view class="form-col">
            <uni-forms-item label="演唱" name="musicSinger">
              <uni-easyinput type="text" v-model="data.formData.musicSinger" placeholder="请输入演唱人" />
            </uni-forms-item>
          </view>
        </view>
        <view class="form-row">
          <view class="form-col">
            <uni-forms-item label="作词" name="musicWording">
              <uni-easyinput type="text" v-model="data.formData.musicWording" placeholder="请输入作词人" />
            </uni-forms-item>
          </view>
          <view class="form-col">
            <uni-forms-item label="作曲" name="musicComposer">
              <uni-easyinput type="text" v-model="data.formData.musicComposer" placeholder="请输入作曲人" />
            </uni-forms-item>
          </view>
        </view>
        <view class="form-row">
          <view class="form-col">
            <uni-forms-item label="风格选择" name="imageStyle">
              <md-select v-model="data.formData.imageStyle" :localdata="styleOptions" @change="changeStyle" placeholder="请选择MV风格" width="40vw"/>
            </uni-forms-item>
          </view>
          <view class="form-col">
            <uni-forms-item label="提示词" name="prompt">
              <uni-easyinput type="text" v-model="data.formData.prompt" placeholder="请输入提示词" />
            </uni-forms-item>
          </view>
        </view>
        <uni-forms-item label="音频" name="musicUrl" required>
          <template v-slot:label>
            <view class="form-item-label">
              <text class="required-red">*</text>
              <text>音频</text>
              <text class="red-tip">先把音频文件上传到微信的“文件传输助手"上，点击导入</text>
            </view>
          </template>
          <uni-file-picker
              v-model="data.formData.musicUrl"
              :sourceType="['album']"
              file-extname="mp3,wav"
              return-type="object"
              file-mediatype="all"
              @select="(e: any) => handleUpload(e, 'musicUrl')">
            <view class="upload-box" v-if="Object.keys(data.formData?.musicUrl || {})?.length == 0">
              <text class="plus">+</text>
            </view>
          </uni-file-picker>
        </uni-forms-item>
        <uni-forms-item label="歌词" name="lyric" required>
          <template v-slot:label>
            <view class="form-item-label">
              <text class="required-red">*</text>
              <text>歌词</text>
              <text class="red-tip">先把文本上传到微信的“文件传输助手”，复制粘贴在这里</text>
            </view>
          </template>
          <view class="form-item-textarea">
            <uni-easyinput
                type="textarea"
                :maxlength="1000"
                v-model="data.formData.lyric"
                placeholder="请输入歌词" />
          </view>
        </uni-forms-item>
      </uni-forms>
      <view class="disclaimer">
        <checkbox :checked="checked" @click="checked = !checked" />
        <text>我已阅读并同意</text>
        <md-agreement text="免责声明" />
      </view>
      <button class="submit-btn" @click="submit">一键制作mv</button>
      <view class="tip">消耗{{ data.adou }}个A豆</view>
      <view class="tip">预计耗时2到5分钟</view>
    </view>
  </view>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue';
// 接口
import api from '@/api/index';
import type { Music } from '@/api/data';
// 工具
import { Toast } from '@/utils/util';
import { uploadToQiniu } from '@/api/util';
import { onLoad, onShow } from '@dcloudio/uni-app';

const data = reactive({
  formData: {
    musicName: null,
    musicTitle: null,
    musicUrl: null,
    lyric: null,
    imageStyle: '0',
  } as Record<string, any>,
  rules: {
    musicName: {
      rules: [
        {
          required: true,
          errorMessage: '请输入歌名',
        },
      ],
    },
    lyric: {
      rules: [
        {
          required: true,
          errorMessage: '请输入歌词',
        },
      ],
    },
    musicUrl: {
      rules: [
        {
          required: true,
          errorMessage: '请上传音频文件',
        },
      ],
    },
  },
  adou: 0,
});
const form = ref(null);
const checked = ref(false);

const styleOptions = ref( [
  { text: "随机风格", value: "0" },
  { text: "水墨画", value: "101" },
  { text: "概念艺术", value: "102" },
  { text: "油画1", value: "103" },
  { text: "油画2（梵高）", value: "118" },
  { text: "水彩画", value: "104" },
  { text: "像素画", value: "105" },
  { text: "厚涂风格", value: "106" },
  { text: "插图", value: "107" },
  { text: "剪纸风格", value: "108" },
  { text: "印象派1（莫奈）", value: "109" },
  { text: "印象派2", value: "119" },
  { text: "2.5D", value: "110" },
  { text: "古典肖像画", value: "111" },
  { text: "黑白素描画", value: "112" },
  { text: "赛博朋克", value: "113" },
  { text: "科幻风格", value: "114" },
  { text: "暗黑风格", value: "115" },
  { text: "3D", value: "116" },
  { text: "蒸汽波", value: "117" },
  { text: "日系动漫", value: "201" },
  { text: "怪兽风格", value: "202" },
  { text: "唯美古风", value: "203" },
  { text: "复古动漫", value: "204" },
  { text: "游戏卡通手绘", value: "301" },
  { text: "通用写实风格", value: "401" }
]);

const handleUpload = async (e: any, key: keyof typeof fileEnum) => {
  uni.showLoading({ title: '上传中...', mask: true });
  let { tempFiles } = e;
  const file = tempFiles?.[0];
  // 音频文件只支持mp3和wav格式
  if (key === 'musicUrl' && !['mp3', 'wav'].includes(file?.extname)) {
    uni.showModal({
      title: '提示',
      content: '音频文件只支持mp3和wav格式',
      showCancel: false,
    });
    data.formData[key] = {};
    uni.hideLoading();
    return;
  }
  try {
    const res: any = await uploadToQiniu(file, 'isong/music/' + key);
    if (res) {
      // 格式化组件需要的格式
      const value = {
        url: res.url,
        extname: res?.extname,
        name: res?.name,
      };
      data.formData[key] = value;
    } else {
      data.formData[key] = {};
    }
  } catch (e) {
    data.formData[key] = {};
  }
  uni.hideLoading();
};

const fetchGetPoint = async () => {
  try {
    const res = await api.Common.getPoint({ type: 1 });
    data.adou = res.data;
  } catch (error) {}
};

const submit = async () => {
  if (!checked.value) {
    Toast('请勾选《免责声明》');
    return;
  }
  try {
    const res = await form.value?.validate();
    const values = {
      ...res,
      musicUrl: res?.musicUrl?.url,
    };
    await fetchCreateMv(values);
  } catch (e) {}
};

const fetchCreateMv = async (params: Music.Create.Body) => {
  try {
    await api.Mv.create({ ...params });
    uni.showModal({
      title: '提示',
      content: '提交成功',
      showCancel: false,
      success: res => {
        if (res.confirm) {
          uni.navigateBack();
        }
      },
    });
  } catch (e) {}
};

const changeStyle = (value: any) => {
  data.formData.imageStyle = value;
};

onLoad(() => {
  fetchGetPoint();
});

onShow(() => {
  // 接收下一个页面带回来的参数
  uni.$once('userAgreement', function (data) {
    if (data?.agree) {
      checked.value = data?.agree;
    }
  });
});
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background: #eaf8f4;
  padding-bottom: 60rpx;
  .form {
    margin: 0;
    padding: 0 24rpx;
  }
  .form-group {
    margin-bottom: 32rpx;
  }
  .label {
    font-size: 28rpx;
    color: #222;
    margin-bottom: 12rpx;
    font-weight: 500;
    display: flex;
    align-items: center;
  }
  .required {
    color: #ff4d4f;
    margin-left: 4rpx;
    font-size: 24rpx;
  }
  .input {
    width: 100%;
    height: 80rpx;
    background: #fff;
    border-radius: 16rpx;
    padding: 0 24rpx;
    font-size: 28rpx;
    border: none;
    margin-top: 8rpx;
  }
  .textarea {
    width: 100%;
    min-height: 120rpx;
    background: #fff;
    border-radius: 16rpx;
    padding: 16rpx 24rpx;
    font-size: 28rpx;
    border: none;
    margin-top: 8rpx;
  }
  .upload-box {
    width: 100%;
    height: 120rpx;
    background: #fff;
    border-radius: 16rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 8rpx;
    font-size: 60rpx;
    color: #bfbfbf;
    border: 2rpx dashed #d9d9d9;
  }
  .plus {
    font-size: 60rpx;
    color: #bfbfbf;
  }
  .disclaimer {
    display: flex;
    align-items: center;
    margin: 24rpx 0 0 0;
    font-size: 24rpx;
    color: #888;
  }
  .submit-btn {
    width: 100%;
    height: 90rpx;
    background: #1fa37a;
    color: #fff;
    font-size: 36rpx;
    border-radius: 60rpx;
    font-weight: 600;
    margin: 40rpx 0 0 0;
    border: none;
    box-shadow: 0 4rpx 16rpx 0 #e0e0e0;
  }
  .submit-btn:disabled {
    background: #b2d8c7;
    color: #fff;
  }
  .tip {
    text-align: center;
    color: #01604a;
    font-size: 26rpx;
    margin-top: 16rpx;
  }
  .form-item-label {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #606266;
    height: 80rpx;
  }
  .red-tip {
    color: #dd524d;;
    font-size: 24rpx;
    margin-left: 10rpx;
  }
  .required-red {
    color: #dd524d;
    font-weight: bold;
  }
  :deep(.form-item-textarea textarea) {
    height: 120px;
  }
  .form-row {
    display: flex;
    gap: 20rpx;
    .form-col {
      flex: 1;
    }
  }
}

:deep(.uni-forms-item) {
  margin-bottom: 8px !important;
}

</style>